<template>
	<view>
		<!-- 话题详情 -->
		<view class="position-relative">
			<image :src="info.cover" mode="aspectFill" style="height: 300rpx;" class="w-100 filter"></image>
		</view>
		<!-- 分割线 -->
		<topic-info :info="info"></topic-info>
		<divider></divider>
		<!-- 置顶帖子 -->
		<view class="flex align-center font border-bottom p-2" hover-class="bg-light" v-for="(item,index) in hotList" :key="index">
			<text class="iconfont icon-xihuan text-main"></text>
			<text class="font text-dark text-ellipsis">{{item.title}}</text>
		</view>
		<!-- 分割线 -->
		<divider></divider>
		<!-- 选项卡 -->
		<view class="flex align-center py-2">
			<view v-for="(item, index) in tabBars" :key="index" class="flex flex-1 align-center justify-center" :class="item.index === tabIndex ? 'font-lg font-weight-bold text-main' : 'font-md'"
			 @click="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 列表 -->
		<template v-if="listData.length > 0">
			<block v-for="(item,index) in listData" :key="index">
				<common-list :item="item" :index="index"></common-list>
				<!-- 分割线 -->
				<divider></divider>
			</block>
		</template>
		<template v-else>
			<!-- 无数据 -->
			<no-thing></no-thing>
		</template>
		<loadmore :loadmore="loadtext"></loadmore>
	</view>
</template>

<script>
	const demo = [{
		username: "昵称1",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题1",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "support",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}, {
		username: "昵称2",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题2",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "unsupport",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}, {
		username: "昵称2",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题2",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}]
	import topicInfo from '@/components/news/topic-info.vue'
	import divider from '@/components/common/divider.vue'
	import commonList from '@/components/common/common-list.vue'
	import noThing from '@/components/common/no-thing.vue'
	import loadmore from '@/components/common/loadmore.vue'

	export default {
		components: {
			topicInfo,
			commonList,
			noThing,
			loadmore
		},
		data() {
			return {
				info: {
					cover: '/static/demo/topicpic/1.jpeg',
					title: '话题名称',
					desc: '话题描述',
					news_count: 10,
					today_count: 10
				},
				hotList: [{
					title: '【新人必读】uni-app实战第二季商城类项目开发'
				}, {
					title: '【话题头条】uni-app实战第二季商城类项目开发'
				}],
				// 当前选中的选项卡
				tabIndex: 0,
				tabBars: [{
					name: '默认',
					index: 0
				}, {
					name: '最新',
					index: 1
				}],
				// 默认
				list1: [],
				loadtext1: '上拉加载更多',
				// 最新
				list2: [],
				loadtext2: '上拉加载更多',
			}
		},
		computed: {
			listData() {
				if (this.tabIndex === 0) {
					return this.list1
				}
				return this.list2
			},
			loadtext() {
				if (this.tabIndex === 0) {
					return this.loadtext1
				}
				return this.loadtext2
			}
		},
		onLoad(e) {
			let res = JSON.parse(e.detail)
			this.info = res
			this.list1 = demo
		},
		// 页面触底事件
		onReachBottom() {
			// 上拉加载更多
			this.loadmore()
		},
		methods: {
			// 切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			// 上拉加载更多
			loadmore() {
				// 拿到当前列表
				let index = this.tabIndex
				// 判断是否处于可加载状态
				if (this.loadtext != '上拉加载更多') return
				// 设置上拉加载状态为加载中...
				this['loadtext' + (index + 1)] = '加载中...'
				// 请求数据
				setTimeout(() => {
					this['list' + (index + 1)] = [...this['list' + (index + 1)], ...this['list' + (index + 1)]]
					this['loadtext' + (index + 1)] = '上拉加载更多'
				}, 2000)
			}
		}
	}
</script>

<style>
	.filter {
		filter: blur(10px);
	}
</style>
